<template>
  <div :style="{ width: '100%', height: '100%' }" ref="homeEch"></div>
</template>

<script>
import user from "@/api/user";
export default {
  name: "Age",
  data() {
    return {
      data: [],
      agelist: [{}],
    };
  },
  created() {
    // this.echarts();
  },
  mounted() {
    this.echarts();
    this.resizefun = () => {
      this.$echarts.init(this.$refs.homeEch).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  //移除事件监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
  methods: {
    //
    async echarts() {
      let that = this;
      let myChart = this.$echarts.init(this.$refs.homeEch);
      let res = await user.show_person_sign_statistics();
      let names = [];
      let total = 0;
      let data = res.data
      let valueList = data.map(function (item, i) {
        names.push(item.name);
        total = total + item.count;
        return {
          name: item.name,
          value: item.count,
          itemStyle: {
            normal: {
              color: that.$colors[i],
            },
          },
        };
      });
      that.$emit("MarkTypeTotal", total);
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        // legend: {
        //   orient: "vertical",
        //   top: 0,
        //   bottom: 10,
        //   left: 0,
        //   data: names,
        //   textStyle: {
        //     color: "#fff",
        //   },
        // },
        series: [
          {
            name: "人数",
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: valueList,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>
